import React from 'react'
import MobileHeader from './mobile_header';
import MobileFooter from './mobile_footer';
import { Tabs, Row, Upload, Icon, Modal, Card } from 'antd'
import { store } from '../../store/store'

const TabPane = Tabs.TabPane;

class mobileUsercenter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userComments: '',
      userCollection: '',
      previewImage: '',
      previewVisiable: false
    }
  }

  componentDidMount() {
    store.getUserCollection(localStorage.userId)
      .then(userCollection => {
        this.setState({
          userCollection
        })
      })
    store.getUserComments(localStorage.userId)
      .then((userComments) => {
        this.setState({
          userComments
        })
      })
  }

  render() {
    const props = {
      action: 'http://newsapi.gugujiankong.com/Handler.ashx',
      header: {
        'Access-Control-Allow-Origin': '*'
      },
      listType: 'picture-card',
      defaultFileList: [
        {
          uid: -1,
          name: 'xxx.png',
          state: 'done',
          url: 'https://fuss10.elemecdn.com/1/c1/e2f163f578ebcfa914e44e9b95d93jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/',
          thumUrl: 'https://fuss10.elemecdn.com/1/c1/e2f163f578ebcfa914e44e9b95d93jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/'
        }
      ],
      onProview: (file) => {
        this.setState({
          previewImage: file.url,
          previewVisiable: true
        })
      }
    }
    const { userCollection, userComments } = this.state;
    const userCollectionList = userCollection.length
      ? (
        userCollection.map((item, index) => {
          return (
            <Card key={index} title={item.uniquekey} extra={<a href={`/detail/${item.uniquekey}`} style={{ marginTop: '10px' }}>查看</a>}>
              <p>{item.Title}</p>
            </Card>
          )
        })
      ) : (
        '暂无收藏，快去收藏新闻'
      )
    const userCommentList = userComments.length
      ? (
        userComments.map((item, index) => {
          return (
            <Card key={index} title={`于${item.datetime} 评论了文章 ${item.uniquekey}`} extra={<a href={`/detail/${item.uniquekey}`} style={{ marginTop: '10px' }}>查看</a>}>
              <p>{item.Comments}</p>
            </Card>
          )
        })
      ) : (
        '暂无评论，快去评论新闻'
      )
    return (
      <div>
        <MobileHeader />
        <Row>
          <Tabs>
            <TabPane tab='我的收藏列表' key='1'>
              {userCollectionList}
            </TabPane>
            <TabPane tab='我的评论列表' key='2'>
              {userCommentList}
            </TabPane>
            <TabPane tab='头像设置' key='3'>
              <div>
                <Upload {...props}>
                  <Icon type='plus' />
                  <div className='ant-upload-text'>上传照片</div>
                </Upload>
                <Modal visible={this.state.previewVisiable} footer={null} onCancel={this.handleCancel} >
                  <img src={this.state.previewImage} alt="预览" />
                </Modal>
              </div>
            </TabPane>
          </Tabs>
        </Row>
        <MobileFooter />
      </div>
    )
  }
}

export default mobileUsercenter